<template>
  <div class="c-eqpt-list-view-doc">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="search"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <c-eqpt-list-view-doc-add
          v-if="auth.isAdd"
          :data="info"
          @close="query"
        ></c-eqpt-list-view-doc-add>
      </template>
    </c-row-search>

    <c-table
      ref="table"
      hiegth="calc(100% - 56px)"
      :data="filterData"
      :col="table.col"
    >
      <template #opn="{ row }" v-if="auth.isDownload || auth.isDelete">
        <el-button type="text" @click="down(row)" v-if="auth.isDownload">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_down_a') }}
          </span>
        </el-button>
        <el-button type="text" @click="del(row)" v-if="auth.isDelete">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
    </c-table>
  </div>
</template>
<script>
import { downfile, fileurl } from '@/http/api/v1/file'

import CEqptListViewDocAdd from './ViewDocAdd.vue'
import { delAssetDoc } from '@/http/api/v1/eqpt'
import { searchWord } from '@/util/data'
export default {
  name: 'CEqptListViewDoc',
  components: { CEqptListViewDocAdd },
  props: {
    auth: {
      type: Object,
      default() {
        return {}
      }
    },
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      keyword: '',
      filterData: [],
      table: {
        col: [
          { label: 'title_file_a', prop: 'file_original_name' },
          {
            label: 'title_c',
            prop: 'file_type_id',
            formatter: row => {
              return this.fileCategoryMap[row.file_type_id]
            }
          },
          {
            label: 'title_file_b',
            prop: 'type_name'
          },
          {
            label: 'title_file_c',
            prop: 'file_size',
            formatter: row => {
              return row.file_size + ' MB'
            }
          }
        ]
      }
    }
  },
  computed: {
    fileCategoryMap() {
      return this.optionMap('file_category')
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  beforeCreate() {},
  created() {
    this.setOption('file_category')
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    refreshTable() {
      this.$refs.table.refreshTable()
    },
    search() {
      this.filterData = searchWord(
        this.keyword,
        this.data,
        'file_original_name'
      )
    },
    query() {
      this.$emit('query')
    },
    down(row = {}) {
      const { id } = row
      downfile(fileurl(id))
    },
    del(row = {}) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'text_w']),
        this.multLang('btn_delete_a', 'text_w'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { id } = row
        id &&
          delAssetDoc({ id: this.info.id, file_id: id }).then(() => {
            this.query()
          })
      })
    }
  }
}
</script>
<style lang="scss">
.c-eqpt-list-view-doc {
  @include wh;
}
</style>
